<template>
  <el-drawer
    v-model="visible"
    :title="isEdit ? '修改个人资料' : '个人信息'"
    direction="rtl"
    size="400px"
  >
    <template #header>
      <div class="profile-header">
        <span>{{ isEdit ? '修改个人资料' : '个人信息' }}</span>
        <el-button v-if="!isEdit" type="primary" @click="startEdit">
          编辑资料
        </el-button>
      </div>
    </template>

    <div class="profile-content">
      <div class="avatar-section">
        <el-avatar :size="80" :src="userInfo.avatar">
          {{ userInfo.name.charAt(0) }}
        </el-avatar>
        <el-button v-if="isEdit" text @click="showAvatarDialog = true">
          更换头像
        </el-button>
      </div>

      <template v-if="isEdit">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="editForm.email" />
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="editForm.phone" />
          </el-form-item>
          <el-form-item label="简介">
            <el-input
              v-model="editForm.bio"
              type="textarea"
              :rows="3"
              placeholder="介绍一下自己..."
            />
          </el-form-item>
        </el-form>
        
        <div class="form-actions">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveProfile">保存</el-button>
        </div>
      </template>

      <template v-else>
        <div class="info-list">
          <div class="info-item">
            <span class="label">用户名</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">邮箱</span>
            <span class="value">{{ userInfo.email }}</span>
          </div>
          <div class="info-item">
            <span class="label">手机</span>
            <span class="value">{{ userInfo.phone || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">简介</span>
            <span class="value">{{ userInfo.bio || '这个人很懒，什么都没写~' }}</span>
          </div>
          <div class="info-item">
            <span class="label">注册时间</span>
            <span class="value">{{ formatDate(userInfo.createdAt) }}</span>
          </div>
        </div>

        <div class="stats-section">
          <div class="stat-item">
            <span class="number">{{ userInfo.sheetCount }}</span>
            <span class="label">表格数</span>
          </div>
          <div class="stat-item">
            <span class="number">{{ userInfo.collaborationCount }}</span>
            <span class="label">协作数</span>
          </div>
          <div class="stat-item">
            <span class="number">{{ userInfo.friendCount }}</span>
            <span class="label">好友数</span>
          </div>
        </div>
      </template>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';

const props = defineProps<{
  modelValue: boolean;
  userInfo: any;
}>();

const emit = defineEmits(['update:modelValue', 'save']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const isEdit = ref(false);
const editForm = ref({
  name: '',
  email: '',
  phone: '',
  bio: ''
});

const showAvatarDialog = ref(false);

const startEdit = () => {
  editForm.value = { ...props.userInfo };
  isEdit.value = true;
};

const cancelEdit = () => {
  isEdit.value = false;
};

const saveProfile = () => {
  emit('save', editForm.value);
  isEdit.value = false;
  ElMessage.success('保存成功');
};

const formatDate = (date: string) => {
  return format(new Date(date), 'yyyy年MM月dd日');
};
</script>

<style lang="scss" scoped>
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.profile-content {
  padding: 20px;

  .avatar-section {
    text-align: center;
    margin-bottom: 24px;

    .el-avatar {
      margin-bottom: 12px;
    }
  }

  .info-list {
    .info-item {
      padding: 12px 0;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;

      .label {
        width: 80px;
        color: #64748b;
        font-size: 14px;
      }

      .value {
        flex: 1;
        color: #334155;
        font-size: 14px;
      }
    }
  }

  .stats-section {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;

    .stat-item {
      .number {
        display: block;
        font-size: 24px;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 4px;
      }

      .label {
        font-size: 14px;
        color: #64748b;
      }
    }
  }

  .form-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}
</style> 